<template>
	<view class="wrap">
		<view class="msgItem"
			@tap="setReadTag(itemInners.id,msgIndex,itemInners.readTag)"
		>
			<view class="msgCon">
				<view class="msgTit hasFlex">
					<view class="iconfont icon-tongzhi"></view>
					<view>{{itemInners.title}}</view>
					<view class="noReadTag" v-if="itemInners.readTag == 1"></view>
				</view>
				<view class="content">{{itemInners.content}}</view>
				<view class="addTime">{{itemInners.addTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemInners: {
				type: Object,
				default: () => {}
			},
			msgIndex:Number
		},
		data(){
			return{
				
			}
		},
		methods:{
			setReadTag(id,index,readTag){
				this.$emit('setReadTag',id,index,readTag)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.wrap{
		padding-top: 30rpx;
	}
	.msgItem{
		padding: 0rpx 0rpx 0; 
		.msgCon{
			padding: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			.content{
				font-size: $font-size26;
				color: $pss-text-color8;
				margin-top: 15rpx;
			}
			.msgTit{
				font-weight: bold;
				font-size: $font-size32;
				color: $pss-text-color3;
				align-items: center;
				position: relative;
				.noReadTag{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					width: 20rpx;
					height: 20rpx;
					background:$pss-color-red;
					border-radius: 50%; 
				}
				.icon-tongzhi{
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #fff6e7;
					color: $pss-color-primary_1;
					border-radius: 8rpx;
					font-size: $font-size30;
					margin-right: 15rpx;
					font-weight: normal;
				}
			}
		}
		.addTime{
			text-align: right;
			padding: 5rpx 0;
			font-size: $font-size24;
			color: $pss-text-colora;
		}
		.msgTime{
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 auto 30rpx;
			text-align: center;
			font-size: $font-size28;
			color: $pss-text-color8;
			border-radius: 50rpx;
			background: #fff;
		}
	}
</style>